<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="diagram">
  <link rel="stylesheet" href="./assets/common.css">

  <title>extrude Polygon</title>
  <style>
	#map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>

<body>
<div id = 'gui' style="position:absolute;top:0px;right:0px;z-index:2;"></div>
<div id="map"></div>
 <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/l7.js"></script>
<script>
var mapinstance = new AMap.Map('map',{
    center: [121.576757,31.279873 ],
    viewMode: '3D',
    pitch: 0,
    zoom: 3,
    maxZoom:20,
    minZoom:0,
 });

const scene = new L7.Scene({
   map:mapinstance,
   mapStyle: 'dark', // 样式URL
});
const testdata ={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "台湾省", "adchar": "TW", "adcode": "710000" }, "geometry": { "type": "MultiPolygon", "coordinates": []}},

{ "type": "Feature", "properties": { "name": "香港特别行政区", "adchar": "HK", "adcode": "810000" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 114.14248888, 22.21378364 ], [ 114.15532932, 22.18121582 ], [ 114.12041857, 22.1778068 ], [ 114.12550781, 22.20163113 ], [ 114.14248888, 22.21378364 ] ] ], [ [ [ 114.03187174, 22.50414117 ], [ 114.05707574, 22.49962267 ], [ 114.09034451, 22.52099338 ], [ 114.11727376, 22.52693576 ], [ 114.16559221, 22.5588907 ], [ 114.22328503, 22.55276418 ], [ 114.23256348, 22.54004286 ], [ 114.25916992, 22.54580702 ], [ 114.31378011, 22.48003472 ], [ 114.34789252, 22.47696479 ], [ 114.35680067, 22.44871528 ], [ 114.40614176, 22.43313911 ], [ 114.38037164, 22.3980561 ], [ 114.39597548, 22.38613851 ], [ 114.35939182, 22.33371691 ], [ 114.34550212, 22.34353 ], [ 114.33830566, 22.37256755 ], [ 114.28866102, 22.38996392 ], [ 114.2745025, 22.34589247 ], [ 114.27839979, 22.32869195 ], [ 114.31761909, 22.29589681 ], [ 114.27628554, 22.25969672 ], [ 114.26276123, 22.2594873 ], [ 114.2579777, 22.22344265 ], [ 114.26467529, 22.20091064 ], [ 114.20091363, 22.21052762 ], [ 114.20133925, 22.22976128 ], [ 114.16502903, 22.2267258 ], [ 114.13977132, 22.24544189 ], [ 114.12089355, 22.27769694 ], [ 114.14599365, 22.30066325 ], [ 114.12099175, 22.32091987 ], [ 114.07006239, 22.32707384 ], [ 114.05293918, 22.30351074 ], [ 114.03638943, 22.30201525 ], [ 114.02920058, 22.26255697 ], [ 114.00444255, 22.24070231 ], [ 114.02127984, 22.22056776 ], [ 113.99541585, 22.20598768 ], [ 113.9756665, 22.23080187 ], [ 113.93758653, 22.21539524 ], [ 113.9000217, 22.21172363 ], [ 113.85738146, 22.19277154 ], [ 113.84295058, 22.22663384 ], [ 113.87353923, 22.26579997 ], [ 113.89706109, 22.28195367 ], [ 113.89809489, 22.30884142 ], [ 113.93825439, 22.32186686 ], [ 113.96331935, 22.30575346 ], [ 114.01575358, 22.33206109 ], [ 114.01624268, 22.35565864 ], [ 113.97993028, 22.36608751 ], [ 113.94139296, 22.35527018 ], [ 113.92003906, 22.36786892 ], [ 113.90601101, 22.4043948 ], [ 113.94222358, 22.42619602 ], [ 113.99865533, 22.48222439 ], [ 114.03187174, 22.50414117 ] ] ] ] } },
{ "type": "Feature", "properties": { "name": "澳门特别行政区", "adchar": "MO", "adcode": "820000" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 113.55444806, 22.10731191 ], [ 113.5546384, 22.14242784 ], [ 113.53455973, 22.17410265 ], [ 113.54076443, 22.19938341 ], [ 113.5588852, 22.21237707 ], [ 113.56781793, 22.20876356 ], [ 113.60387207, 22.1328654 ], [ 113.58019396, 22.10969401 ], [ 113.55444806, 22.10731191 ] ] ] ] } }
]
}


scene.on('loaded', () => {


    citylayer = scene.PolygonLayer()
    .source(testdata)
    .color('red')
    .shape('fill')
    .active(true)
    .style({
      opacity: 1.0
    })
    .render();
});

</script>
</body>
</html>

